import React, { useRef } from 'react';
import { Modal, Form, Button, Input } from 'antd';

interface CreateUnitProps {
  targetKey: string;
  modalVisible: boolean;
  onCancel: () => void;
  onSave: (targetKey: string, title: string) => void;
}

const CreateUnit: React.FC<CreateUnitProps> = (props) => {
  const form = useRef(null);

  const { targetKey, modalVisible, onCancel, onSave } = props;

  return (
    <Modal
      destroyOnClose
      title="新建单体工程"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form
        ref={form}
        onFinish={(e) => {
          onSave(targetKey, e.title);
        }}
      >
        <Form.Item
          name="title"
          label="单体名称"
          rules={[
            { required: true, message: '必填' },
            { max: 20, message: '最长不超过20个字符！' },
          ]}
        >
          <Input maxLength={20} />
        </Form.Item>

        <Form.Item>
          <Button size="large" type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateUnit;
